<template>
  <div>
    <DynamicForm
      v-model="formData"
      :form-config="formConfig"
    >
      <el-button @click="generatePicture">生成图片</el-button>
    </DynamicForm>
    <WangEditor
      v-model="data"
    ></WangEditor>
    <h1>红框内尽量填充完整</h1>
    <div style="border: 1px red solid;display: inline-block">
      <div ref="resultRef" class="resultRef" :style="{width: picSize.width+'px',height: picSize.height+'px'}">
        <div v-html="data">

        </div>
      </div>
    </div>
    <div style="display: flex;flex-wrap: wrap">
      <div v-for="(item,index) in Object.keys(saveData)"
        :key="item+index"
      >
        <h1>{{item}}</h1>
        <img
          v-if="saveData[item]"
          :src="saveData[item]" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import WangEditor from "@localModules/ZhiXinLib/components/WangEditor";
import {FormConfig} from "@localModules/ZhiXinLib/element-components/dynamic-form/ConfigType";
import DynamicForm from '@localModules/ZhiXinLib/element-components/dynamic-form';
import html2canvas from "html2canvas";

export default {
  name: "index",
  components: {
    WangEditor,
    DynamicForm
  },
  computed:{
    picSize(){
      if(this.formData.q_p === '题目'){
        return {
          width: 1064,
          height: 272
        }
      } else {
        return {
          width: 262,
          height: 247
        }
      }
    },
  },
  data(){
    return {
      data: '<p>这是标题</p>',
      saveData:{// 保存的数据
        q:'',
        A:'',
        B:'',
        C:'',
        D:'',
      },
      formData:{},
      ADOptions:[
        {
          value: 'A'
        },
        {
          value: 'B'
        },
        {
          value: 'C'
        },
        {
          value: 'D'
        },
      ],
      formConfig: new FormConfig({showTitle:false},[
        {
          label: '题目/选项',
          type: 'select',
          prop: 'q_p',
          initValue: '题目',
          props: {
            options:[
              {
                value: '题目'
              },
              {
                value: '选项'
              }
            ]
          }
        },
        {
          label: '选项A-D',
          type: 'select',
          prop: 'A_D',
          setHidden:(formData, formItem)=>{
            if(formData['q_p']==='题目'){
              formData['A_D'] = undefined
              return true
            }
            formData['A_D'] = 'A'
            return false
          },
          props: {
            setOptions:()=>{
              return this.ADOptions
            }
          }
        },
        {
          label: '答案',
          type: 'select',
          prop: 'a',
          initValue: 'A',
          props: {
            clearable:false,
            setOptions:()=>{
              return this.ADOptions
            }
          }
        }
      ])
    }
  },
  methods:{
    generatePicture() {
      html2canvas(this.$refs.resultRef,{
        backgroundColor: 'transparent', // null或transparent可将canvas背景设置为透明
        dpi: 1000,
        useCORS: true,
        height: this.picSize.height,
        width: this.picSize.width
      })
      .then(canvas=>{
        if(this.formData.q_p === '题目'){
          this.saveData.q = canvas.toDataURL('image/png')
        } else {
          this.saveData[this.formData.A_D] = canvas.toDataURL('image/png')
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.resultRef{
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
</style>
